<template>
  <div class="pay_vip" v-if="userInfo">
    <div class="vbox_header">
      <div class="p_text">
        <strong>您当前是：</strong>
        <strong>{{ userInfo.vipLevel | lowestVipName }}</strong>
        <template v-if="userInfo.autoVipType != '0' && userInfo.vipLevel == '5'">
          <i class="vip_v">个人版(连续包{{userInfo.duration == '12' ? '年' : userInfo.duration == '3' ? '季' : '月'}})</i>
        </template>
        <template v-else>
          <i class="vip_v" v-if="userInfo.vipLevel != '0' && userInfo.vipLevel != '3'">{{userInfo.vipLevel == 5 ? '个人版' : '企业版'}}</i>
          <span v-if="userInfo.vipLevel != '0'">有效期至：{{ vipEndTime }}</span>
        </template>
        <!-- <span>升级{{lowestVip | lowestVipName}}及以上会员后可查看完整数据和功能</span> -->
      </div>
      <div class="header_msg">
        <i class="trumpet"></i>
        <div class="text_box">
          <div ref="textBox">
            <p v-for="(text, idx) in msg" :key="idx + 'text'">{{ text }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="vbox_main">
      <div class="tabs_box">
        <ul class="tabs">
          <!-- <li
            :disabled="userVipIndex > filterTabIndex(3)"
            @click="tabCheckedFn(3)"
          >
            <el-tooltip effect="dark" popper-class="mytooltip" :disabled="userVipIndex <= filterTabIndex(3)" placement="bottom">
              <div slot="content" class="disabled_tooltip_box"><i></i><span>您只能购买自身级别及以上的会员，如有问题，请联系客服</span></div>
              <div>
                <i class="vip_icon vip3"></i>
                <span>体验版</span>
                <p>专注账号内容创作</p>
              </div>
            </el-tooltip>
          </li> -->
          <li
            :disabled="userVipIndex > filterTabIndex(4)"
            @click="tabCheckedFn(4)"
          >
            <el-tooltip effect="dark" popper-class="mytooltip" :disabled="userVipIndex <= filterTabIndex(4)" placement="bottom">
              <div slot="content" class="disabled_tooltip_box"><i></i><span>您只能购买自身级别及以上的会员，如有问题，请联系客服</span></div>
              <div>
                <i class="vip_icon vip4"></i>
                <span>VIP</span>
                <div class="recommend">企业版</div>
                <p>全面提升直播、达人、带货能力</p>
              </div>
            </el-tooltip>
          </li>
          <li
            :disabled="userVipIndex > filterTabIndex(5)"
            @click="tabCheckedFn(5)"
          >
            <el-tooltip effect="dark" popper-class="mytooltip" :disabled="userVipIndex <= filterTabIndex(5)" placement="bottom">
              <div slot="content" class="disabled_tooltip_box"><i></i><span>您只能购买自身级别及以上的会员，如有问题，请联系客服</span></div>
              <div>
                <i class="vip_icon vip1"></i>
                <span>SVIP</span>
                <div class="recommend">个人版</div>
                <p>账号运营涨粉，助力直播变现</p>
              </div>
            </el-tooltip>
          </li>
          <li
            :disabled="userVipIndex > filterTabIndex(1)"
            @click="tabCheckedFn(1)"
          >
            <el-tooltip effect="dark" popper-class="mytooltip" :disabled="userVipIndex <= filterTabIndex(1)" placement="bottom">
              <div slot="content" class="disabled_tooltip_box"><i></i><span>您只能购买自身级别及以上的会员，如有问题，请联系客服</span></div>
              <div>
                <i class="vip_icon vip1"></i>
                <span>SVIP</span>
                <div class="recommend">企业版</div>
                <p>账号运营涨粉，助力直播变现</p>
              </div>
            </el-tooltip>
          </li>
          <li @click="tabCheckedFn(2)">
            <i class="vip_icon vip2"></i>
            <span>Plus</span>
            <div class="recommend">企业版</div>
            <p>精准数据价值，智能分析匹配</p>
          </li>
        </ul>
        <i class="tab_line" :style="{ left: tabIndex * 25 + '%' }"></i>
      </div>
      <div class="tabs_content">
        <template v-if="monthData">
          <div class="tc_box">
            <ul :class="{'two_m': monthData && monthData.length == 2}">
              <template v-for="(item, idx) in monthData">
                <!-- <li :class="{'active':monthIndex == item.duration,'disabled':!item.status}" :key="idx+'month123'" @click="monthCheckedFn(item)">
                  <span class="tc_month">{{item.duration}}个月</span>
                  <p class="tc_price">￥<strong>{{item.payAmount}}</strong></p>
                  <span class="tc_original_price">￥{{item.marketPrice}}</span>
                  <p class="tc_discounts">
                    <span>已优惠：{{item.sumRatePrice}}</span>
                    <el-tooltip effect="light" placement="top" :disabled="!item.status" popper-class="mytooltip" :content="'折扣优惠金额（￥'+item.ratePrice+'）+ 当前会员级别剩余价值（'+item.balance+'）'">
                      <i class="annotation"></i>
                    </el-tooltip>      
                  </p>
                </li>-->
                <li
                  :class="{
                    active: monthIndex == item.duration,
                    disabled: !item.status
                  }"
                  :key="idx + 'month123'"
                  @click="monthCheckedFn(item)"
                >
                  <i class="discounts_icon" v-if="item.disCount"
                    >限时{{ (item.disCount * 10).toFixed(1) }}折起</i
                  >
                  <i class="discounts_icon" v-if="activeVip == 5&&item.duration==12">送666大礼包</i>
                  <div class="tc_box_top">
                    <!-- <div class="gift_bag">送666大礼包</div> -->
                    <span class="tc_month">{{ item.duration }}个月</span>
                    <p class="tc_price">￥<strong>{{ item.payAmount }}</strong></p>
                    <span class="tc_day_price" :class="{ priceActive: monthIndex == item.duration }" v-if="activeVip == 5">
                      <!-- {{item.dayPrice}}/天 -->
                      {{item.duration==12? '买即送礼包': '限时特惠'}}
                    </span>
                    <span class="tc_original_price" v-else>￥{{ item.marketPrice }}</span>
                  </div>
                  <div class="line">
                    <i></i>
                  </div>
                  <div class="tc_box_bottom">
                    <span v-if="item.give">赠送{{ item.give }}</span>
                    <!-- <span v-else>{{ activeVip == 5 ? '限时特惠' : '紧急试用'}}</span> -->
                    <span v-else-if="!item.give&&activeVip == 4">{{ '紧急试用'}}</span>
                    <span v-else>{{item.dayPrice}}/天</span>
                  </div>
                </li>
              </template>
            </ul>
          </div>
          <div class="giftbag_cont" v-if="monthIndex==12&&activeVip == 5">
            <p class="top">礼包内容：<span>66元优惠券×1</span>（满198可用，可赠送他人）<span>200元优惠券×3</span>（满500元可用，可赠送他人）</p>
            <p class="btm">注：当前活动仅支持会员级别为SVIP-个人版（含）以下用户参与，最终解释权归掌上精选所有</p>
          </div>
          <div class="contact_us">
            <div class="pop_item_box">
              <strong @click="dialog01">对公转账？</strong>
            </div>
            <div class="pop_item_box">
              <i class="weixin_icon"></i>
              <span>联系客服</span>
              <div class="contact_us_qr">
                <div class="qr_box">
                  <img src="@/assets/img/xiaozhushou_qr.jpg" />
                </div>
              </div>
            </div>
          </div>
          <div class="pay_box" v-if="payResult">
            <div class="pay_type">
              <div class="pay_btn pay_zfb" :class="{ active: activePayType }" @click="activePayType = 1" >
                <i></i>
              </div>
              <div class="pay_btn pay_wx" :class="{ active: !activePayType }" @click="activePayType = 0" >
                <i></i>
              </div>
            </div>
            <div class="pay_result">
              <div class="have_coupon" @click="isCoupon=true;getCoupon()">
                <div class="coupon_left"><img src="@/assets/shi/couponIcon.png" alt="">优惠券</div>
                <div class="coupon_right" v-if="couponId"><span>-￥{{couponItem.amount}}</span><img src="@/assets/shi/blackArrow.png" alt=""></div>
                <div class="coupon_right" v-else-if="!couponId&&!payResult.usableCouponCount">暂无可用优惠券<img src="@/assets/shi/blackArrow.png" alt=""></div>
                <div class="coupon_right" v-else>您有<span>{{payResult.usableCouponCount}}张</span>可用优惠券<img src="@/assets/shi/blackArrow.png" alt=""></div>
              </div>
              <div class="pay_wx_box" v-if="checkWxPay">
                <div class="pay_img_code">
                  <template v-if="!qrLoading">
                    <vue-qr
                      :size="124"
                      :margin="0"
                      :auto-color="true"
                      :dot-scale="1"
                      v-if="wxPayData"
                      :text="wxPayData.url"
                    />
                  </template>
                  <div class="pay_loding" v-else>
                    <Loading></Loading>
                  </div>
                  <!-- <img :src="" alt="请尽快支付" v-if="wxPayData"> -->
                </div>
                <div class="pay_text">
                  <div class="total_price">
                    <span>￥</span>
                    <strong>{{ !couponItem?payResult.payAmount:payResult.payAmount- couponItem.amount }}</strong>
                    <!-- <el-tooltip v-if="bindType!=2" class="item" effect="dark" :content="'折扣优惠金额 (￥'+payResult.ratePrice +') + 当前会员级别剩余价值 ('+payResult.balance+')'" placement="top"> -->
                    <el-tooltip v-if="bindType!=2" class="item" effect="dark" :content="'折扣优惠金额 (￥' + payResult.ratePrice + ')'" placement="top">
                      <img src="@/assets/meng/search_result04.png" alt="">
                    </el-tooltip>
                  </div>
                  <div class="end_time">有效期：{{ payResult.endTime }}</div>
                  <p>使用微信扫一扫付款</p>
                </div>
              </div>
              <!-- 微信支付点击按钮 -->
              <div class="pay_zfb_box" v-if="!checkWxPay">
                <div class="pay_text">
                  <div class="total_price">
                    <span>￥</span>
                    <strong>{{ !couponItem?payResult.payAmount:payResult.payAmount- couponItem.amount}}</strong>
                    <el-tooltip v-if="bindType!=2" class="item" effect="dark" :content="'折扣优惠金额 (￥' + payResult.ratePrice + ')'" placement="top">
                      <img src="@/assets/meng/search_result04.png" alt="">
                    </el-tooltip>
                  </div>
                  <p>有效期至：{{ payResult.endTime }}</p>
                </div>
                <button class="pay_btn disabled" v-if="userInfo.autoVipType != '0' && userInfo.vipLevel == activeVip">您已是自动续费会员</button>
                <button class="pay_btn" @click="goPay()" v-else>立即付款</button>
                <!-- <button class="pay_btn" @click="goPay(2)" v-else>立即付款</button> -->
              </div>
              <!-- <div class="pay_zfb_box" v-else>
                <div class="pay_text">
                  <div class="total_price">
                    <span>￥</span>
                    <strong>{{ payResult.payAmount }}</strong>
                    <el-tooltip v-if="bindType!=2" class="item" effect="dark" :content="'折扣优惠金额 (￥' + payResult.ratePrice + ')'" placement="top">
                      <img src="@/assets/meng/search_result04.png" alt="">
                    </el-tooltip>
                  </div>
                  <p>有效期至：{{ payResult.endTime }}</p>
                </div>
                <button class="pay_btn disabled" v-if="userInfo.autoVipType != '0' && userInfo.vipLevel == activeVip">您已是自动续费会员</button>
                <button class="pay_btn" @click="goPay(2)" v-else>立即付款</button>
              </div> -->
            </div>
          </div>
        </template>
        <div class="select_coupon" v-if="isCoupon">
          <div class="sc_close">
            <img @click="isCoupon=false" src="@/assets/shi/close.png" alt="">
          </div>
          <div class="sc_title_box">
            <div class="sc_title">选择优惠券</div>
          </div>
          <div class="sc_content" v-if="couponList.length">
            <!-- 动态class判断的是优惠券可用价格大于会员价格,则不可使用给它置灰  -->
            <div class="sc_cont_item" :class="{'not_available': item.status}" v-for="item in couponList" :key="item.id">
              <div class="sc_tag">满减券</div>
              <div class="main_left">
                <div>
                  <span class="span1">￥</span>
                  <span class="span2">{{item.amount}}</span>
                  <span class="span3">满{{item.enough}}元可用</span>
                </div>
              </div>
              <div class="main_right" v-if="!item.status">
                <img v-if="item.id==couponId" @click="isActive(item)" src="@/assets/shi/checkout.png" alt="">
                <div v-else @click="noActive(item)" class="no_img"></div>
              </div>
              <div class="main_right" v-else>
                <div class="no_img"></div>
              </div>
            </div>
          </div>
          <div class="no_data" v-if="!couponList.length">
            <img src="@/assets/shi/zanwushuju.png" alt />
            <div>您暂时没有优惠券哦~</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialog" width="500px" top="20vh">
      <div class="delPop">
        <p class="title">提示</p>
        <div>
          <p>
            当前账号为子账号，购买升级后将自动与主账号解除绑定，不在享受主账号会员权限，是否继续购买会员服务？
          </p>
          <!-- <button class="btn" @click="dialog = false">取消</button> -->
          <button @click="dialog = false" class="btn1">确定</button>
        </div>
      </div>
    </el-dialog>
    <el-dialog 
      :visible.sync="isShowUpDialog" 
      :lock-scroll="false" 
      :show-close="false" 
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="460px" 
      top="30vh" 
      custom-class="up_dialog">
      <div class="up_dialog_content">
        <h5><span>温馨提示</span></h5>
        <div class="up_dialog_msg">
          <p v-if="userVipInfo">您当前会员级别为：<span>{{lowestVipNameWhole(userVipInfo.vipLevel)}}{{renewInit(userVipInfo)}}</span></p>
          <p>您将要开通：<span>{{lowestVipNameWhole(activeVip)}}</span></p>
          <p class="up_annotation">注：开通后当前级别仍在生效中，级别高的会员将优先使用</p>
        </div>
        <div class="up_dialog_btns">
          <button @click="isShowUpDialog=false">取 消</button>
          <button class="active" @click="upConfirmFn">确 定</button>
        </div>
        <div class="up_icon"></div>
      </div>
    </el-dialog>
    <!-- 会员等级大于svip个人版 并且是点击活动进来的谈弹框 -->
    <el-dialog v-if="showTip&&(userInfo.vipLevel==1||userInfo.vipLevel==2)" :visible.sync="diaActivity" width="500px" top="20vh">
      <div class="buy_five_wrapper">
        <div class="pop_title">温馨提示</div>
        <div class="pop_container">
          <div class="pop_tips">该活动仅支持会员级别为SVIP-个人版（含）以下用户参与</div>
          <div class="pop_btn" @click="diaActivity=false;showTip=false">确认</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 0免费版、1svip、2Plus、3体验版、4vip
let timer = null;
import Loading from "@/component/loading.vue";
export default {
  name: "payVip",
  props: {
    routerName: String,
    lowestVipNum: Number, //当前功能最低vip版本支持
    isResize: {
      //是否需要缩放
      type: Boolean,
      default: true
    },
    VipType01: ""
  },
  components: {
    Loading
  },
  data() {
    return {
      userInfo:null,  //用户信息
      dialog: false,
      userVipIndex: "", //当前用户vip所对应的tab下标
      tabIndex: 0, //会员框tab下标
      activePayType: 1, //支付框tab下标
      monthIndex: 12, //月份选择（默认12个月）
      monthData: null, //月份数据list
      payResult: null, //最终支付状态数据
      wxPayData: null, //微信支付对象（二维码、支付id）
      wxPayLoop: null, //轮询微信付款状态
      activeVip: 2, //默认展示SVIP个人版
      cancelRequest: null, //清除上一次请求
      qrLoading: true, //微信二维码loading
      vipEndTime: "", //会员到期时间
      msg: [],
      textScrollCount: 1, //文字滚动
      textTimer: null, //文字滚动定时器
      bindType: 0,
      isShowUpDialog:false, //升级确认弹框
      checkWxPay:false, //是否为微信支付
      userVipInfo:null, //用户续费信息
      isCoupon: false,
      diaActivity: true, //温馨提示的弹窗
      showTip: false,
      couponList:[], //优惠券列表
      couponItem: null, //当前选中的优惠券
      couponId: 0,
    };
  },
  created() {
    this.getperson().then(()=>{
      this.userVipIndex = this.filterTabIndex(this.userInfo.vipLevel);
      this.tabIndex = this.filterTabIndex(this.VipType01);
      if (this.VipType01) {
        //如果是从会员权益跳转过来的
        this.activeVip = this.VipType01;
      }
      this.getMonthData();
      // console.log(this.$store.state.userInfo);
      this.vipEndTime = localStorage.getItem('vipEndTime1').split(" ")[0];
    });
  },
  mounted() {
    this.getMsg();
    // 把showTip改为true, 然后清除路由参数, 再刷新页面showTip变回默认值false, 只有刚跳转过来的时候弹一下弹窗,再刷新的时候不让他弹
    if(this.$route.query.showTip) this.showTip = true;
    let path = this.$route.path;
    this.$router.push(path)
  },
  methods: {
    dialog01(){// 对公转账
      this.$store.commit('dialog01',true)
    },
    // 取消优惠券
    isActive(){
      this.couponId = 0;
      this.couponItem=null;
      if(this.checkWxPay){
        this.getWxPayImgCode()
      }
    },
    //选择优惠券
    noActive(item){
      this.couponId = item.id;
      this.couponItem = item;
      // 微信支付的时候, 每次选择优惠券重新刷新二维码
      if(this.checkWxPay){
        this.getWxPayImgCode()
      }
    },
    //获取优惠券列表
    getCoupon(){
      this.couponList = []
      this.$axios.get("/api/pay/GetUsableCoupon",{
        params:{
          VipType: this.activeVip,
          duration: this.payResult.duration
        }
      }).then(res=>{
        if(!res.data.code){
          if(res.data.data==null){
            this.couponList = []
          }else{
            this.couponList = res.data.data;
          }
          this.couponList.forEach(item => {
            if(item.id==this.couponId){
              this.couponItem = item
            }
          });

        }
      })
    },
    // 判断是否为子账号
    getperson() {
      return new Promise((resolve,reject)=>{
        this.loading = true;
        this.$axios.get("/api/customer/getperson").then(res => {
          if (res.data.code == 0) {
            this.bindType = res.data.data.bindType;
            this.userInfo = res.data.data;
            if (res.data.data.bindType == 2) {
              this.showTip = false;
              this.diaActivity = false;
              this.dialog = true;
            }
            resolve();
          }
        });
      });
    },
    getMsg() {
      this.$axios({
        method: "get",
        url: "api/pay/GetOrderHistory"
      }).then(res => {
        if (res.data.code == 0) {
          this.msg = res.data.data;
          this.setTextScroll();
        }
      });
    },
    setTextScroll() {
      //消息轮播
      let box = this.$refs.textBox;
      if(!box) return;
      let timerC = null;
      this.textTimer = setInterval(() => {
        if (this.textScrollCount > this.msg.length - 1) {
          box.style.transform = "translateY(0px)";
          this.textScrollCount = 1;
        }
        let countC = (this.textScrollCount - 1) * 20;
        clearInterval(timerC);
        timerC = setInterval(() => {
          countC++;
          box.style.transform = "translateY(" + countC * -1 + "px)";
          if (countC % 20 == 0) {
            clearInterval(timerC);
          }
        }, 10);
        // let el = this.msg.splice(0,1);
        // this.msg.push(el[0]);
        this.textScrollCount++;
      }, 6000);
    },
    filterTabIndex(num) {
      //获取会员级所对应的下标
      let idx = 0;
      if (num == 4) {
        idx = 0;
      } else if (num == 5) {
        idx = 1;
      } else if (num == 1) {
        idx = 2;
      } else if (num == 2) {
        idx = 3;
      }
      return idx;
    },
    // 点击会员tab切换函数
    tabCheckedFn(vipNum) {
      if(vipNum != 2 && this.userVipIndex > this.filterTabIndex(vipNum)){
        return;
      }
      let tabIndex = this.filterTabIndex(vipNum);
      if (tabIndex == this.tabIndex) return;
      if (tabIndex >= this.userVipIndex) {
        //判断用户当前vip等级是否可以点击当前会员选项卡
        this.tabIndex = tabIndex;
        this.activeVip = vipNum;
        this.getMonthData();
      }
      this.checkWxPay = false;  //每次切换都隐藏微信支付二维码
    },
    // 选择月份
    monthCheckedFn(itemObj) {
      if (itemObj.status) {
        this.monthIndex = itemObj.duration;
        this.payResult = itemObj;
      }
      this.checkWxPay = false;  //每次切换都隐藏微信支付二维码
    },
    // 获取月份数据
    getMonthData() {
      let that = this;
      this.$axios(
        {
          method: "get",
          url: "api/pay/GetVipPrice",
          params: {
            VipType: that.activeVip
            // VipData: this.value01,
          }
        },
        {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancelRequest) that.cancelRequest();
            that.cancelRequest = c;
          })
        }
      ).then(res => {
        if (res.data.code == 0) {
          this.monthData = res.data.data;
          this.payResult = null;
          this.monthData.forEach(item => {
            if (this.monthIndex == item.duration && item.status) {
              //获取当前选中月份的支付结果
              this.payResult = item;
            }
          });
        }
      });
    },
    // 获取微信支付相关信息
    getWxPayImgCode() {
      if (!this.payResult) return;
      this.qrLoading = true;
      let vipName = this.$options.filters["lowestVipName"](this.activeVip);
      let vipTitle = "抖音数据平台会员付费-" + vipName + "会员";
      let pam = {
        OrderName: vipTitle,
        Duration: this.payResult.duration,
        VipType: this.activeVip,
        MarketPrice: this.payResult.marketPrice,
        RatePrice: this.payResult.ratePrice,
        PayAmount: this.payResult.payAmount,
        ReturnUrl: "https://dy.zsjx114.com" + this.$route.path
      }
      if(this.couponId){
        pam.CouponId = this.couponId
      }
      this.$axios
        .post("/api/pay/WXPayRequest", pam)
        .then(res => {
          this.qrLoading = false;
          if (res.data.code == 0) {
            this.wxPayData = res.data.data;
            this.setWxPayLoop(this.wxPayData.orderId);
          }
        });
    },
    // 设置微信支付轮询
    setWxPayLoop(orderId) {
      this.clearWxPayLoop();
      timer = setInterval(() => {
        this.loopWxPayResult(orderId);
      }, 1000);

      // this.$once('hook:beforeDestroy', () => {
      //   clearInterval(timer);
      // });
    },
    // 微信支付轮询函数
    loopWxPayResult(orderId) {
      let that = this;
      this.$axios(
        {
          method: "get",
          url: "/api/pay/GetOrderStatus",
          params: {
            orderid: orderId
          }
        },
        {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancelRequest) that.cancelRequest();
            that.cancelRequest = c;
          })
        }
      ).then(res => {
        if (res.data.data.status == 1) {
          this.clearWxPayLoop();
          this.$message({
            message: "支付成功，正在为您跳转...",
            type: "success",
            duration: 2000
          });
          setTimeout(() => {
            location.replace("https://dy.zsjx114.com" + this.$route.path);
          }, 2000);
        }
      });
    },
    upConfirmFn(){//确定升级
      this.pays();
    },
    goPay(){
      if(this.userInfo.autoVipType != '0' && this.userInfo.vipLevel == this.activeVip) return;  //如果是连续包月的svip个人版，不允许续费操作
      let userVipInitIdx = this.filterTabIndex(this.userInfo.vipLevel);
      let activeVipInitIdx = this.filterTabIndex(this.activeVip);
      if(activeVipInitIdx > userVipInitIdx && this.userInfo.vipLevel != '0'){ //    升级
        this.getRenewal();
      }else{
        this.pays();
      }
    },
    getRenewal() {
      this.$axios.get("/api/pay/GetAutoRenewInfo").then(res => {
        if(res.data.code == '0'){
          this.userVipInfo = res.data.data;
          this.isShowUpDialog = true;
        }
      });
    },
    pays(){
      this.isShowUpDialog = false;
      if(this.activePayType == 1){
        this.zfbPay();
      }else{
        this.checkWxPay = true;
        this.getWxPayImgCode();
      }
    },
    // 支付宝支付
    zfbPay() {
      if (!this.payResult) return;
      let vipName = this.$options.filters["lowestVipName"](this.activeVip);
      let vipTitle = "抖音数据平台会员付费-" + vipName + "会员";
      let ReturnUrl = "https://dy.zsjx114.com";
      if (this.$route.path == "/talent_main/buy") {
        ReturnUrl += "/talent_main/person_center";
      } else {
        ReturnUrl += this.$route.path;
      }
      let pam = {
        OrderName: vipTitle,
        Duration: this.payResult.duration,
        VipType: this.activeVip,
        ReturnUrl: ReturnUrl,
      }
      if(this.couponId){
        pam.CouponId = this.couponId
      }
      this.$axios
        .post("/api/pay/PayRequest", pam)
        .then(res => {
          if (res.data.code == 0) {
            window.open(res.data.data.url, "_self");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    clearWxPayLoop() {
      clearInterval(timer);
      timer = null;
    },
    lowestVipNameWhole(vipNum) {
      let vName = "";
      if (vipNum == 1) {
        vName = "SVIP-企业版";
      } else if (vipNum == 2) {
        vName = "Plus-企业版";
      } else if (vipNum == 3) {
        vName = "体验版";
      } else if (vipNum == 4) {
        vName = "VIP-企业版";
      } else if (vipNum == 5) {
        vName = "SVIP-个人版";
      }else{
        vName = '免费版';
      }
      return vName;
    },
    renewInit(dataObj){ //自定订阅相关判断展示
      if(dataObj.status == 1 && dataObj.vipType == dataObj.vipLevel){
        // status == 1说明存在自动续费会员等级（当前续费等级不一定是当前会员等级，必须加上 当前会员级别==自动续费会员等级），
        let dateStr = '';
        if(dataObj.duration == 1){
          dateStr = '月';
        }else if(dataObj.duration == 3){
          dateStr = '季';
        }else if(dataObj.duration == 12){
          dateStr = '年';
        }
        return '连续包'+dateStr;
      }
      return '';
    }
  },
  filters: {
    lowestVipName(vipNum) {
      let vName = "免费版";
      if (vipNum == 1 || vipNum == 5) {
        vName = "SVIP";
      } else if (vipNum == 2) {
        vName = "Plus";
      } else if (vipNum == 3) {
        vName = "体验版";
      } else if (vipNum == 4) {
        vName = "VIP";
      }
      return vName;
    }
  },
  computed: {},
  watch: {
    dialog(newVal,oldVal){
      if(!newVal){
        this.showTip = true;
        this.diaActivity = true;
      }
    },
    // 每次切换会员选项都重置月份为12个月
    tabIndex() {
      this.monthIndex = 12;
      // this.couponItem = null;
    },
    // monthIndex(){
    //   this.couponItem = null;
    // },
    // 监听最终支付对象
    payResult() {
      this.couponId = 0;
      this.couponItem = null;
      this.isCoupon = false
      // if (!this.activePayType) {
      //   this.getWxPayImgCode();
      // } else {
      //   this.clearWxPayLoop();
      // }
      this.clearWxPayLoop();
    },
    activePayType(idx) {
      // if (!idx) {
      //   this.getWxPayImgCode();
      // } else {
      //   this.clearWxPayLoop();
      // }
      this.clearWxPayLoop();
      this.checkWxPay = false;
    }
  },
  beforeDestroy() {
    clearInterval(this.textTimer);
    this.textTimer = null;
    this.clearWxPayLoop(); //组件销毁前，将微信支付轮询取消
  }
};
</script>
<style lang="less" scoped>
.pay_vip {
  width: 1000px;
  margin: 0 auto 0;
  padding-top: 50px;
  border-radius: 6px;
  overflow: hidden;
  // box-shadow: 0px 0px 20px 0px
  // 	rgba(0, 0, 0, 0.2);
  // font-family: PingFangSC-Regular;
}
.vbox_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 58px;
  padding: 0 26px;
  box-sizing: border-box;
  border-radius: 6px;
  // background-image: linear-gradient(-28deg,
  //   #ffdfc4 0%,
  //   #fdcda5 99%);
  // background-blend-mode: normal,normal;
  background-image: url("./../../../assets/meng/vip_pop_head.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .header_msg {
    display: flex;
    align-items: center;
    font-size: 0;
    .trumpet {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      background-image: url("./../../../assets/meng/trumpet.png");
      background-repeat: no-repeat;
      background-size: auto 100%;
      animation: run 1500ms steps(1) 0s infinite both;
    }
    @keyframes run {
      0% {
        background-position: 0 0;
      }
      25% {
        background-position: -20px 0;
      }
      50% {
        background-position: -40px 0;
      }
      75% {
        background-position: -60px 0;
      }
      100% {
        background-position: 0 0;
      }
    }
    .text_box {
      font-size: 14px;
      color: #815631;
      height: 20px;
      overflow: hidden;
      p {
        height: 20px;
        line-height: 20px;
      }
    }
  }
  .p_text {
    display: flex;
    align-items: center;
    i {
      margin: 0 5px;
    }
    .vip_v{
      display: inline-block;
      font-style: normal;
      font-size: 12px;
      line-height: 20px;
      padding: 0 5px;
      border-radius: 10px;
      border: 1px solid #815631;
      color: #815631;
    }
    strong {
      font-size: 18px;
      font-weight: normal;
      color: #815631;
      vertical-align: middle;
    }
    span {
      font-size: 14px;
      color: #ba8150;
      margin-left: 10px;
      margin-bottom: -3px;
    }
  }
  .go_link {
    font-size: 14px;
    color: #815631;
  }
}
.vbox_main {
  .tabs_box {
    position: relative;
  }
  .tabs {
    position: relative;
    display: flex;
    padding-top: 28px;
    border-bottom: 2px solid #e5e5e5;
    li {
      position: relative;
      width: 25%;
      padding: 17px 0 20px;
      text-align: center;
      cursor: pointer;
      // background-color: #f1f1f1;
      i {
        margin: 0 6px 0 0;
      }
      span {
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
        color: #222;
        vertical-align: middle;
      }
      .recommend {
        display: inline-block;
        line-height: 20px;
        margin-left: 7px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 10px;
        border: solid 1px #fd7f2c;
        color: #fd7f2c;
        vertical-align: middle;
      }
      p {
        margin-top: 8px;
        font-size: 12px;
        color: #555;
      }
    }
  }
  .tab_line {
    position: absolute;
    bottom: -1px;
    display: inline-block;
    height: 4px;
    width: 25%;
    background-color: #fd7f2c;
    border-radius: 2px;
    transition: all linear 200ms;
  }
  .tabs_content {
    position: relative;
    min-height: 506px;
    margin-top: -1px;
    box-sizing: border-box;
    padding: 40px 80px 43px 90px;
    background-color: #fff;
    .tc_box {
      ul {
        display: flex;
        justify-content: space-between;
        &.two_m{
          justify-content: space-around;
        }
      }
      li {
        position: relative;
        width: 200px;
        // height: 200px;
        box-sizing: border-box;
        text-align: center;
        font-family: PingFangSC-Medium;
        cursor: pointer;
        .discounts_icon {
          position: absolute;
          right: 0;
          top: -10px;
          display: inline-block;
          height: 30px;
          line-height: 30px;
          padding: 0 10px;
          border-radius: 0px 10px 0px 10px;
          font-style: normal;
          color: #fff;
          background-color: #fd7f2c;
        }
        .tc_box_top {
          // position: relative;
          padding-top: 30px;
          padding-bottom: 26px;
          border: 2px solid #efefef;
          border-radius: 10px 10px 0 0;
          border-bottom: none;
          margin-bottom: -1px;
          // .gift_bag{
          //   width: 100px;
          //   line-height: 30px;
          //   text-align: center;
          //   position: absolute;
          //   top: 0;
          //   right: -2px;
          //   transform: translateY(-50%);
          //   border-radius: 0px 10px 0px 10px;
          //   background-color: #fd7f2c;
          // }
        }
        .line {
          position: relative;
          height: 18px;
          overflow: hidden;
          i {
            position: absolute;
            width: 100%;
            top: 6px;
            left: 0;
            display: block;
            height: 2px;
            border-bottom: dashed 2px #efefef;
          }
          &::after,
          &::before {
            content: "";
            position: absolute;
            display: inline-block;
            top: 0;
            width: 14px;
            height: 14px;
            border-radius: 14px;
            border: 2px solid #efefef;
            background-color: #fff;
            z-index: 1;
          }
          &::after {
            right: -10px;
          }
          &::before {
            left: -10px;
          }
        }
        .tc_box_bottom {
          position: relative;
          height: 46px;
          border-radius: 0 0 10px 10px;
          border: 2px solid #efefef;
          border-top: none;
          color: #222;
          font-size: 18px;
          box-sizing: border-box;
          padding-top: 6px;
          margin-top: -1px;
        }
        .tc_month {
          font-size: 20px;
          line-height: 30px;
          color: #222222;
        }
        .tc_price {
          font-size: 20px;
          color: #222222;
          line-height: 40px;
          strong {
            font-size: 34px;
            font-weight: normal;
          }
        }
        .tc_original_price {
          font-size: 14px;
          color: #888;
          text-decoration: line-through;
        }
        .tc_day_price{
          font-size: 14px;
          color: #888;
        }
        .priceActive{
          color: #fd7f2c;
        }
        .tc_discounts {
          margin-top: 38px;
          color: #888;
          font-size: 0;
          span {
            font-size: 14px;
          }
          .annotation {
            display: inline-block;
            width: 14px;
            height: 14px;
            margin: 0 0 -1px 4px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url("./../../../assets/meng/search_result04.png");
          }
        }
        &.active {
          background-color: #fffbf8;
          .tc_month {
            color: #fd9254;
          }
          .tc_price {
            color: #fd9254;
          }
          .line {
            i {
              border-color: #fd7f2c;
            }
            &::after,
            &::before {
              border-color: #fd7f2c;
            }
          }
          .tc_box_top {
            border-color: #fd7f2c;
          }
          .tc_box_bottom {
            border-color: #fd7f2c;
            color: #fd7f2c;
          }
        }
        &.disabled {
          cursor: no-drop;
          background-color: #fff;
          .tc_month {
            color: #b5b5b5;
          }
          .tc_price {
            color: #b5b5b5;
          }
          .tc_original_price {
            color: #b5b5b5;
          }
          .tc_day_price{
            color: #b5b5b5;
          }
          .tc_discounts {
            color: #b5b5b5;
          }
          .tc_box_bottom {
            color: #b5b5b5;
          }
        }
      }
    }
    .giftbag_cont{
      width: 100%;
      height: 70px;
      background-color: #fffbf8;
      border-radius: 10px;
      border: solid 2px #efefef;
      margin-top: 14px;
      padding-top: 15px;
      padding-left: 21px;
      box-sizing: border-box;
      .top{
        font-size: 14px;
        color: #555555;
        span{
          color: #fd7f2c;
        }
      }
      .btm{
        font-size: 12px;
	      color: #888888;
        margin-top: 4px;
      }
    }
    .contact_us {
      position: relative;
      margin-top: 15px;
      text-align: right;
      font-size: 14px;
      color: #888;
      & > div {
        display: inline-block;
        cursor: pointer;
        strong{
          display: inline-block;
          font-weight: normal;
          color: #fd7f2c;
          font-size: 14px;
          margin-right: 10px;
          vertical-align: middle;
          &:hover{
            text-decoration: underline;
          }
        }
        i {
          display: inline-block;
          width: 18px;
          height: 18px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-image: url("./../../../assets/meng/weixin.png");
          vertical-align: middle;
        }
        span {
          display: inline-block;
          vertical-align: middle;
          cursor: pointer;
          // margin-left: 4px;
        }
        &:hover {
          .contact_us_qr {
            .qr_box {
              display: block;
            }
          }
        }
        .contact_us_qr {
          position: absolute;
          right: -47px;
          top: 100%;
          padding-top: 10px;
          z-index: 10;
          .qr_box {
            position: relative;
            display: none;
            width: 136px;
            height: 136px;
            padding: 5px;
            border-radius: 4px;
            background-color: #fff;
            box-shadow: 0px 0px 12px 0px rgba(142, 142, 142, 0.3);
            &:after {
              content: "";
              display: block;
              position: absolute;
              top: -20px;
              left: 50%;
              transform: translateX(-50%);
              width: 0;
              height: 0;
              border-width: 10px;
              border-style: solid;
              border-color: transparent transparent #fff transparent;
            }
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .pay_box {
      // position: relative;
      display: flex;
      justify-content: space-between;
      height: 200px;
      margin-top: 10px;
      border-radius: 10px;
      overflow: hidden;
      box-sizing: border-box;
      border: solid 2px #efefef;
      .pay_type {
        // position: absolute;
        // left: 0;
        // top: 0;
        width: 194px;
        font-size: 0;
        padding: 29px 0 0 32px;
        .pay_btn {
          position: relative;
          height: 60px;
          // background-color: #f1f1f1;
          background-repeat: no-repeat;
          background-position: center center;
          cursor: pointer;
          border: 2px solid #efefef;
          border-radius: 4px;
          box-sizing: border-box;
          &.pay_wx {
            background-size: 110px 30px;
            background-image: url("./../../../assets/meng/b2.png");
          }
          &.pay_zfb {
            background-size: 84px 30px;
            background-image: url("./../../../assets/meng/b3.png");
          }
          &.active {
            border-color: #fd7f2c;
            i{
              display: block;
            }
          }
          &:last-child{
            margin-top: 19px;
          }
          i{
            position: absolute;
            display: none;
            right: -1px;
            bottom: -1px;
            width: 0;
            height: 0;
            border-bottom: 25px solid #fd7f2c;
            border-left: 25px solid transparent;
            &::before{
              position: absolute;
              left: -10px;
              top: 11px;
              content: '';
              display: inline-block;
              width: 4px;
              height: 8px;
              border-color: #fff;
              border-style: solid;
              border-width: 0 2px 2px 0;
              transform: rotate(45deg);
            }
          }
        }
      }
      .pay_result {
        flex: 1;
        height: 100%;
        padding-right: 100px;
        padding-top: 29px;
        box-sizing: border-box;
        .pay_wx_box,
        .pay_zfb_box {
          display: flex;
          justify-content: space-between;
          margin-left: 90px;
          align-items: center;
          margin-top: 17px;
          // align-items: center;
          // height: 100%;
        }
        .have_coupon{
          display: flex;
          justify-content: space-between;
          margin-left: 90px;
          padding-bottom: 13px;
          border-bottom: 1px dashed #efefef;
          box-sizing: border-box;
          .coupon_left{
            font-size: 14px;
            color: #555555;
            display: flex;
            align-items: center;
            img{
              width: 14px;
	            height: 16px;
              margin-right: 5px;
            }
          }
          .coupon_right{
            font-size: 14px;
            color: #888888;
            display: flex;
            align-items: center;
            cursor: pointer;
            img{
              width: 6px;
              height: 10px;
              margin-left: 6px;
            }
            span{
              color: #fd7f2c;
            }
          }
        }
        .pay_wx_box {
          display: flex;
          justify-content: left;
          // height: 100%;
          .pay_img_code {
            width: 80px;
            height: 80px;
            padding: 4px;
            border: solid 2px #e5e5e5;
            img {
              width: 100%;
            }
          }
          .pay_text {
            margin-left: 20px; 
            .total_price {
              display: flex;
              align-items: center;
              color: #fd9254;
              font-size: 20px;
              // margin-bottom: 5px;
              strong {
                font-size: 34px;
                font-weight: normal;
              }
              img{
                width: 20px;
                height: 20px;
                margin-left: 4px;
                cursor: pointer;
                vertical-align: middle;
              }
            }
            .end_time {
              font-size: 14px;
              line-height: 20px;
              color: #555;
            }
            & > p {
              font-size: 14px;
              color: #888;
            }
          }
        }
        .pay_zfb_box {
          .pay_text {
            margin-right: 66px;
            .total_price {
              font-size: 20px;
              color: #fd9254;
              display: flex;
              align-items: center;
              strong {
                font-size: 34px;
                font-weight: normal;
              }
              img{
                width: 20px;
                height: 20px;
                margin-left: 4px;
                cursor: pointer;
                vertical-align: middle;
              }
            }
            p {
              margin-top: 5px;
              font-size: 14px;
              color: #555;
            }
          }
          .pay_btn {
            padding: 0 25px;
            height: 48px;
            line-height: 48px;
            font-size: 16px;
            background-color: #fd7f2c;
            font-weight: bold;
            border-radius: 6px;
            color: #fff;
            &.disabled{
              cursor: not-allowed;
              color: #888;
              background-color: #efefef;
            }
          }
        }
      }
    }
  }
}
.disabled_tooltip_box{
  i{
    display: inline-block;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
    background-image: url("./../../../assets/img/disabled_w.png");
    margin-right: 5px;
  }
  span{
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
  }
}
.select_coupon{
  position: absolute;
  right: 80px;
  bottom: 45px;
  width: 400px;
  height: 430px;
  border-radius: 4px;
  padding: 23px 7px 14px 20px;
  background-color: #fff;
  box-shadow: 0px 0px 12px 0px rgba(200, 198, 198, 0.5);
  box-sizing: border-box;
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .sc_close{
    position: absolute;
    right: 14px;
    top: 14px;
    width: 16px;
    height: 16px;
    img{
      width: 100%;
      height: 100%;
      vertical-align: top;
      cursor: pointer;
    }
  }
  .sc_title_box{
    width: 100%;
    height: 20px;
    padding-bottom: 20px;
    .sc_title{
      font-size: 16px;
      font-weight: 600;
      color: #222222;
      display: flex;
      align-items: center;
    }
    .sc_title::before{
      content: "";
      display: inline-block;
      width: 4px;
      height: 16px;
      background-color: #ee7d2f;
      border-radius: 2px;
      margin-right: 4px;
    }
  }
  .sc_content{
    flex: 1;
    overflow-y: auto;
    .sc_cont_item{
      position: relative;
      width: 360px;
      height: 80px;
      display: flex;
      justify-content: space-between;
      border-radius: 4px;
      box-sizing: border-box;
      margin-bottom: 10px;
      background: url("~@/assets/shi/coupon01.png") no-repeat;
      background-size: 100% 100%;
      
      .sc_tag{
        position: absolute;
        left: 1px;
        top: 1px;
        width: 64px;
        line-height: 26px;
        text-align: center;
        font-size: 14px;
        color: #895343;
        background-color: #e9d2a9;
        border-radius: 0 0px 14px 0px;
      }
      .main_left{
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 77px;
        box-sizing: border-box;
        .span1{
          font-size: 18px;
          color: #8a5443;
        }
        .span2{
          font-family: PingFangSC-Regular;
          font-size: 40px;
          color: #8a5443;
        }
        .span3{
          font-size: 14px;
          color: #895342;
        }
      }
      .main_right{
        height: 100%;
        padding-right: 25px;
        display: flex;
        align-items: center;
        img{
          width: 20px;
          height: 20px;
          cursor: pointer;
        }
        .no_img{
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: solid 1px #8a5443;
          cursor: pointer;
        }
      }
    }
    .not_available{
      background: url("~@/assets/shi/coupon02.png") no-repeat;
      background-size: 100% 100%;
      .sc_tag{
        color: #888888;
        background-color: #d5d5d5;
        border-radius: 4px 0px 14px 0px;
      }
      .main_left{
        .span1,.span2,.span3{
          color: #888888;
        }
      }
      .main_right{
        .no_img{
          border: solid 1px #bfbfbf;
          background-color: #e4e4e4;
        }
      }
    }
  }
  .no_data{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #b5b5b5;
    img{
      width: 218px;
      height: 176px;
    }
  }
}
.vip_icon {
  display: inline-block;
  width: 22px;
  height: 17px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  vertical-align: middle;
  &.vip0 {
    background-image: url("./../../../assets/meng/b4.png");
  }
  &.vip3 {
    background-image: url("./../../../assets/meng/vipl1.png");
  }
  &.vip4 {
    background-image: url("./../../../assets/meng/vipl2.png");
  }
  &.vip1 {
    background-image: url("./../../../assets/meng/b5.png");
  }
  &.vip2 {
    background-image: url("./../../../assets/meng/b6.png");
  }
}
.pay_loding {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
[disabled] {
  cursor: no-drop !important;
}
.delPop {
  // width: 460px;
  min-height: 283px;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 30px 30px 40px 30px;
  box-sizing: border-box;
  .title {
    font-size: 16px;
    font-weight: 600;
    position: relative;
    color: #222222;
    text-indent: 8px;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 16px;
      background-color: #fd7f2c;
      border-radius: 2px;
    }
  }
  div {
    width: 100%;
    text-align: center;
    padding-top: 50px;

    p {
      padding-bottom: 35px;
      // padding-bottom: 6px;
      line-height: 30px;
      font-size: 16px;
      color: #222222;
      padding-left: 5px;
      padding-right: 5px;
    }
    .btn {
      width: 170px;
      height: 50px;
      font-size: 16px;
      font-weight: 600;

      border-radius: 4px;
      border: solid 1px #e5e5e5;
      margin-right: 15px;
      color: #888888;
    }
    .btn1 {
      width: 170px;
      height: 50px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 4px;
      color: #ffffff;
      background-color: #fd7f2c;
    }
  }
}
//
.Entry {
  position: absolute;
  right: 4px;
  bottom: 10px;
  font-size: 12px;
  color: #fd7f2c;
}
.dialog01 {
  .content {
    .d5 {
      display: block;
      width: 150px;
      height: 48px;
      background-color: #fd7f2c;
      border-radius: 4px;
      text-align: center;
      font-size: 16px;
      line-height: 44px;
      color: #ffffff;
      margin: 0 auto;
      margin-top: 50px;
    }
    .d4 {
      margin-top: 14px;
      span {
        font-size: 14px;
        color: #555555;
      }
      color: #222;
    }
    .d3 {
      > div {
        text-align: center;
        img {
          width: 36px;
          height: 36px;
        }
        p {
          font-size: 14px;
          margin-top: 10px;
          color: #555555;
        }
      }
      > img {
        width: 13px;
        height: 12px;
        margin: 0 40px;
      }
      margin-top: 30px;
      margin-bottom: 50px;
      display: flex;
      align-items: center;
    }
    .d2 {
      font-weight: 600;
      font-size: 16px;
      color: #222222;
      text-align: left;
    }
    .d1 {
      font-weight: 600;
      font-size: 20px;
      color: #222222;
      text-align: center;
    }
    padding: 50px 30px;
    box-sizing: border-box;
  }
}
.pay_vip /deep/.el-dialog{
  border-radius: 4px;
}
.buy_five_wrapper{
  width: 100%;
  height: 230px;
  box-shadow: 0px 0px 12px 0px 
    rgba(200, 198, 198, 0.5);
  border-radius: 4px;
  padding: 23px 20px 0 ;
  box-sizing: border-box;
  .pop_title{
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    display: flex;
    align-items: center;
  }
  .pop_title::before{
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #ee7d2f;
    border-radius: 2px;
    margin-right: 4px;
  }
  .pop_container{
    .pop_tips{
      text-align: center;
      font-size: 16px;
      color: #222222;
      margin-top: 42px;
    }
    .pop_btn{
      width: 360px;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      background-color: #ed8641;
	    border-radius: 4px;
      margin: 40px auto;
      cursor: pointer;
    }
  }
}
</style>
